<template>
  <div class="app">
    <div class="ztree-wrapper">
      <input placeholder="搜索关键字" v-model="keyValue" type="search" />
      <div class="ztree-box">
        <div v-show="noData">未找到对应条目</div>
        <ul :id="treeId" class="ztree" ref="ztree"></ul>
      </div>
    </div>
  </div>
</template>
	
<script>
import * as jquery from "jquery";
let $ = jquery;
if (window.jQuery) {
  $ = window.jQuery;
} else {
  window.jQuery = $;
}
require("@ztree/ztree_v3/css/metroStyle/metroStyle.css");
require("@ztree/ztree_v3/js/jquery.ztree.all");
require("@ztree/ztree_v3/js/jquery.ztree.exhide");

// import { data } from "./ztreeData.js";
export default {
  name: "App",
  props: {
    zNodes: {
      type: Array,
      require: true,
      default: function () {
        return [];
      },
    },
  },
  data() {
    return {
      keyValue: "",
      noData: false,
      treeId: "treeDemo",
      treeObj: "",
      nodes: [],
      allNodes: [],
      nodesShow: [],
      setting: {
        data: {
          simpleData: {
            enable: true,
            idKey: "GSBM",
            pIdKey: "FBM",
          },
          key: {
            name: ["GSMC"],
          },
        },
        check: {
          enable: false,
        },
        view: {
          showIcon: false,
          // fontCss : {color : 'red'}
        },
        edit: {
          enable: false,
          editNameSelectAll: false,
        },
        callback: {
          onClick: (...arg) => {
            this.$emit("onClick", ...arg);
          },
          onCreated: (...arg) => {
            this.$emit("handleCreated", ...arg);
          },
        },
      },
      // zNodes: [],
    };
  },
  watch: {
    keyValue(newV) {
      this.searchFun(newV, null, true);
    },
    // nodesList: {
      // handler: function (nodes) {
      //   this.list = nodes;

      //   // update tree
      //   if (this.ztreeObj) {
      //     this.ztreeObj.destroy();
      //   }
      //   this.$nextTick(() => {
      //     this.ztreeObj = $.fn.zTree.init(
      //       $("#" + this.ztreeId),
      //       Object.assign({}, this.ztreeSetting, this.setting),
      //       this.list
      //     );
      //     this.$emit("onCreated", this.ztreeObj);
      //   });
      // },
      // deep: true,
      // immediate: true,
    // },
  },
  mounted() {
    // this.zNodes = this.nodesList;
    this.initzTree();
  },
  methods: {
    initzTree() {
      this.treeObj = $.fn.zTree.init(
        $("#" + this.treeId),
        this.setting,
        this.zNodes
      );
      var nodes = this.treeObj.getNodes();
      this.treeObj.expandNode(nodes[0]);
      this.allNodes = this.queryFun(nodes);
    },
    queryFun(node) {
      for (var i in node) {
        this.nodes.push(node[i]);
        if (node[i].children) {
          this.queryFun(node[i].children);
        }
      }
      return this.nodes;
    },
    searchFun(val, isHighLight, isExpand) {
      var key = val.replace(/(^\s*)|(\s*$)/g, "");
      this.nodesShow = [];
      isHighLight = isHighLight === false ? false : true;
      isExpand = isExpand ? true : false;
      this.filterzTree(key, this.allNodes, isExpand, isHighLight);
      if (this.keyValue === "") {
        this.noData = false;
      } else {
        if (this.nodesShow.length === 0) {
          this.noData = true;
        } else {
          this.noData = false;
        }
      }
      this.showNodesFun(this.nodesShow, key);
    },
    filterzTree(key, nodes, isExpand, isHighLight) {
      var metaChar = "[\\[\\]\\\\^\\$\\.\\|\\?\\*\\+\\(\\)]";
      var rexMeta = new RegExp(metaChar, "gi");
      var nameKey = this.treeObj.setting.data.key.name;
      for (var i = 0; i < nodes.length; i++) {
        if (nodes[i] && nodes[i].oldname && nodes[i].oldname.length > 0) {
          nodes[i][nameKey] = nodes[i].oldname;
        }
        this.treeObj.updateNode(nodes[i]);
        if (key === "") {
          this.initzTree();
          break;
        } else {
          if (
            nodes[i][nameKey] &&
            nodes[i][nameKey].toLowerCase().indexOf(key.toLowerCase()) !== -1
          ) {
            if (isHighLight) {
              var newKeywords = key.replace(rexMeta, (matchStr) => {
                return "//" + matchStr;
              });
              nodes[i].oldname = nodes[i][nameKey];
              var rexGlobal = new RegExp(newKeywords, "gi");
              nodes[i][nameKey] = nodes[i].oldname.replace(
                rexGlobal,
                (originalText) => {
                  // var highLightText ='<span style="color: whitesmoke;background-color: darkred;">' + originalText + "</span>";
                  var highLightText = originalText;

                  return highLightText;
                }
              );
              this.treeObj.updateNode(nodes[i]);
            }
            this.treeObj.showNode(nodes[i]);
            this.nodesShow.push(nodes[i]);
          } else {
            this.treeObj.hideNode(nodes[i]);
          }
        }
      }
    },
    showNodesFun(nodesShow, key) {
      if (key.length > 0) {
        nodesShow.forEach((node) => {
          var pathOfOne = node.getPath();
          if (pathOfOne && pathOfOne.length > 0) {
            for (var i = 0; i < pathOfOne.length - 1; i++) {
              this.treeObj.showNode(pathOfOne[i]);
              this.treeObj.expandNode(pathOfOne[i], true);
            }
          }
        });
      } else {
        var rootNodes = this.treeObj.getNodesByParam("level", "0");
        rootNodes.forEach((node) => {
          this.treeObj.expandNode(node, true);
        });
      }
    },
  },
};
</script>
	
	<style>
.ztree li a {
  height: 30px;
}
.ztree li a.curSelectedNode {
  height: 33px;
  background-color: #4fa5fa;
  border-radius: 3%;
}
.ztree li {
  line-height: 34px;
}
.ztree * {
  font-size: 20px;
}
/* * {
  padding: 0;
  margin: 0;
}
app {
  width: 100vw;
  height: 100vh;
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  overflow: hidden;
}
.ztree-wrapper {
  height: 830px;
  overflow: hidden;
  float: left;
  padding: 25px 0;
  margin: 35px 100px;
  border: 2px solid rgba(0, 0, 0, 0.5);
}
.ztree-box {
  width: 800px;
  height: 100%;
  padding: 10px 50px;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
} */
</style>